<template>
  <div id="map" style="mymap">

  </div>
</template>

<script>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import { TileSuperMapRest } from "@supermap/iclient-ol";

export default {
  name: "supermap",
  data(){
    return{
      Map:null
    }
  },
  mounted(){
    this.mapinit();
  },
  methods:{
    mapinit(){
      //var url = "http://192.168.32.187:8090/iserver/services/map-WYCSSJ0412/rest/maps/WYXDLTB"; //内网地址
      var url="http://123.56.110.82:8090/iserver/services/map-WYCSSJ0407/rest/maps/WYDLTB"; //外网地址
      this.map = new Map({
        target: "map",
        //controls: control.defaults({ attributionOptions: { collapsed: false } }).extend([new Logo()]),
        view: new View({
          center: [115.87,37.79],
          zoom: 11.5,
          projection: "EPSG:4326",
        })
      });
      var layer = new TileLayer({
        source: new TileSuperMapRest({
          url: url,
          wrapX: true,
          transparent:true,
        }),
        projection: "EPSG:4326"
      });
      this.map.addLayer(layer);
    }
  }
}
</script>

<style scoped>
@import "../../assets/ol/mapView.css";
@import "../../assets/ol/ol.css";
#map{
  height: 940px;
  width: 1920px;
  border: 2px solid  #ff0000;
}
.map{
  height: 940px;
  width: 1920px;
  border: 2px solid  #ff0000;
}
</style>
